<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="../framework/header.jsp" />
<style type="text/css">
.demo {
	/* for IE10+ touch devices */
	touch-action: none;
}

.ep {
    position: absolute;
    bottom: 37%;
    right: 5px;
    width: 1em;
    height: 1em;
    background-color: orange;
    cursor: pointer;
    box-shadow: 0 0 2px black;
    -webkit-transition: -webkit-box-shadow 0.25s ease-in;
    -moz-transition: -moz-box-shadow 0.25s ease-in;
    transition: box-shadow 0.25s ease-in;
}

.w:hover {
	background-color: #5c96bc;
	color: white;
}

.aLabel {
	-webkit-transition: background-color 0.25s ease-in;
	-moz-transition: background-color 0.25s ease-in;
	transition: background-color 0.25s ease-in;
}
.draggable {padding: 5px !important;}
.draggable .panel{margin:0;}
.draggable .panel .btn-control{display:none;}
.aLabel.jtk-hover, .jtk-source-hover, .jtk-target-hover {
	
    background: #f9f9f9;
    border: 1px dashed #5c96bc;
}

#jspl-canvas .draggable{position: absolute;}
#jspl-canvas .draggable .btn-control{display:block;}

.aLabel {
	background-color: white;
	opacity: 0.8;
	padding: 0.3em;
	border-radius: 0.5em;
	border: 1px solid #346789;
	cursor: pointer;
}

.statemachine-demo .jtk-endpoint {
	z-index: 3;
}

.dragHover {
	border: 2px solid orange;
}

path, .jtk-endpoint {
	cursor: pointer;
}
</style>
<div id="container"
	class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">

	<jsp:include page="../framework/topper.jsp" />
	<div class="boxed">
		<!--=======================  页面主体内容  ============================-->
		<div id="content-container">
			<div class="wrapper">
				<!--=========================  页面标题  ==========================-->
				<div id="page-title">
					<h1 class="page-header text-overflow">
						构建镜像 <small>副标题</small>
					</h1>
				</div>
				<ol class="breadcrumb">
					<li><a href="#">我的镜像</a></li>
					<li><a href="#">镜像列表</a></li>
					<li class="active">构建镜像</li>
				</ol>
				<div id="page-content">
					<div class="tab-base">
						<!--Nav tabs-->
						<ul class="nav nav-tabs">
							<li class="active"><a data-toggle="tab"
								href="#demo-stk-lft-tab-1">公共组件</a></li>
							<li><a data-toggle="tab" href="#demo-stk-lft-tab-2">pcitc组件</a>
							</li>
							<li><a data-toggle="tab" href="#demo-stk-lft-tab-3">其它组件</a>
							</li>
						</ul>

						<!--Tabs Content-->
						<div class="tab-content">
							<div id="demo-stk-lft-tab-1" class="tab-pane fade active in">
								<div class="row">
									<div data-id="1" class="col-md-3 draggable">
										<div class="panel  mar-btm">
											<div class="pad-all">
												<div class="media">
													<div class="media-left">
														<img alt="Profile Picture" class="img-md img-circle"
															src="${pageContext.request.contextPath}/static/images/8.png">
													</div>
													<div class="media-body pad-top">
														<span class="text-lg text-semibold">Nginx 1.6</span>
														<p class="text-sm">跨平台的web服务器</p>
													</div>
												</div>
												<div class="btn-control clearfix">
													<button class="btn btn-default btn-rounded pull-right">
														<i class="fa fa-edit"></i>
													</button>
												</div>
											</div>
										</div>
									</div>
									<div data-id="2" class="col-md-3 draggable">
										<div class="panel mar-btm">
											<div class="pad-all">
												<div class="media">
													<div class="media-left">
														<img alt="Profile Picture" class="img-md img-circle"
															src="${pageContext.request.contextPath}/static/images/4.png">
													</div>
													<div class="media-body pad-top">
														<span class="text-lg text-semibold">tomcate 7.0.2</span>
														<p class="text-sm">跨平台的web服务器</p>
													</div>
												</div>
												<div class="btn-control clearfix">
													<button class="btn btn-default btn-rounded pull-right">
														<i class="fa fa-edit"></i>
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="demo-stk-lft-tab-2" class="tab-pane fade">
								<div class="row">
									<div data-id="3" class="col-md-3 draggable">
										<div class="panel mar-btm">
											<div class="pad-all">
												<div class="media">
													<div class="media-left">
														<img alt="Profile Picture" class="img-md img-circle"
															src="${pageContext.request.contextPath}/static/images/4.png">
													</div>
													<div class="media-body pad-top">
														<span class="text-lg text-semibold">tomcate 7.0.2</span>
														<p class="text-sm">跨平台的web服务器</p>
													</div>
												</div>
												<div class="btn-control clearfix">
													<button class="btn btn-default btn-rounded pull-right">
														<i class="fa fa-edit"></i>
													</button>
												</div>
											</div>
										</div>
									</div>
									<div data-id="4" class="col-md-3 draggable">
										<div class="panel mar-btm">
											<div class="pad-all">
												<div class="media">
													<div class="media-left">
														<img alt="Profile Picture" class="img-md img-circle"
															src="${pageContext.request.contextPath}/static/images/8.png">
													</div>
													<div class="media-body pad-top">
														<span class="text-lg text-semibold">Nginx 1.6</span>
														<p class="text-sm">跨平台的web服务器</p>
													</div>
												</div>
												<div class="btn-control clearfix">
													<button class="btn btn-default btn-rounded pull-right">
														<i class="fa fa-edit"></i>
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="demo-stk-lft-tab-3" class="tab-pane fade">
								<div class="row">
									<div data-id="5" class="col-md-3 draggable">
										<div class="panel mar-btm">
											<div class="pad-all">
												<div class="media">
													<div class="media-left">
														<img alt="Profile Picture" class="img-md img-circle"
															src="${pageContext.request.contextPath}/static/images/4.png">
													</div>
													<div class="media-body pad-top">
														<span class="text-lg text-semibold">tomcate 7.0.2</span>
														<p class="text-sm">跨平台的web服务器</p>
													</div>
												</div>
												<div class="btn-control clearfix">
													<button class="btn btn-default btn-rounded pull-right">
														<i class="fa fa-edit"></i>
													</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


					<div class="panel">
						<div id="jspl-canvas" class="panel-body" style="height: 500px; overflow: hidden; position: relative;">
							<!-- <div class="jtk-demo-main">
					            demo
					            <div class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan" id="canvas">
					                <div class="w" id="opened">BEGIN
					                    <div class="ep" action="begin"></div>
					                </div>
					                <div class="w" id="phone1">PHONE INTERVIEW 1
					                    <div class="ep" action="phone1"></div>
					                </div>
					                <div class="w" id="phone2">PHONE INTERVIEW 2
					                    <div class="ep" action="phone2"></div>
					                </div>
					                <div class="w" id="inperson">IN PERSON
					                    <div class="ep" action="inperson"></div>
					                </div>
					                <div class="w" id="rejected">REJECTED
					                    <div class="ep" action="rejected"></div>
					                </div>
					            </div>
					            /demo
					        </div> -->
						</div>
					</div>
					<!--=========================  页面显示内容  ==========================-->

				</div>
			</div>
		</div>

		<!--=========================  过程可视化消息栏  ==========================-->
		<jsp:include page="../framework/aside.jsp" />

		<!--=========================  左侧菜单  ==========================-->
		<jsp:include page="../framework/lefter.jsp" />

	</div>

	<!--=========================  页面底部版权信息  ==========================-->
	<jsp:include page="../framework/footer.jsp" />

	<!--=========================  返回顶层按钮  ==========================-->
	<button class="scroll-top btn">
		<i class="pci-chevron chevron-up"></i>
	</button>
	<!--=========================  选择皮肤功能  ==========================-->
	<jsp:include page="../framework/page-set.jsp" />

	<div id="floating-top-right" class="floating-container"></div>
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->

<jsp:include page="../framework/script.jsp" />
<%-- --%>
<script
	src="${pageContext.request.contextPath}/static/plugin/jquery-ui-1.12.1.drag-drop/jquery-ui.min.js"></script>
<script
	src="${pageContext.request.contextPath}/static/plugin/jsplumb/js/jsplumb.min.js"></script>
<script type="text/javascript">
	var connections = [];
	$(function() {
	})
	
	var exampleGreyEndpointOptions = {
			endpoint: ["Dot", { radius: 7 }], //端点的形状
			paintStyle: {
			    strokeStyle: "#1e8151",
			    fillStyle: "transparent",
			    radius: 5,
			    lineWidth: 2
			  },
			  isSource:true,
			  connector: "Straight",
			  isTarget:true
			};
	var exampleDropOptions = {
            tolerance: "touch",
            hoverClass: "dropHover",
            activeClass: "dragActive"
        };
	var example3Color = "rgba(229,219,61,0.5)";
    var exampleEndpoint3 = {
        endpoint: ["Dot", {radius: 17} ],
        anchor: "BottomLeft",
        paintStyle: { fill: example3Color, opacity: 0.5 },
        isSource: true,
        scope: 'yellow',
        connectorStyle: {
            stroke: example3Color,
            strokeWidth: 4
        },
        connector: "Straight",
        isTarget: true,
        dropOptions: exampleDropOptions,
        beforeDetach: function (conn) {
            return confirm("Detach connection?");
        },
        onMaxConnections: function (info) {
            alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id);
        }
    };

	jsPlumb.ready(function() {
		
		var updateConnections = function (conn, remove) {
        	console.info(conn);
			var idx = -1;
            for (var i = 0; i < connections.length; i++) {
            	console.info(connections[i] == conn);
                if (connections[i].sourceId == conn.sourceId && connections[i].targetId == conn.targetId) {
                    idx = i;
                    break;
                }
            }
            if (!remove){
            	if (idx != -1) return false;
            	connections.push(conn);
            } else {
                if (idx != -1) connections.splice(idx, 1);
            }
        	return true;
        };

		// setup some defaults for jsPlumb.
		var instance = jsPlumb.getInstance({
			 Endpoint: ["Dot", {radius: 2}],
		        Connector:"StateMachine",
		        HoverPaintStyle: {stroke: "#1e8151", strokeWidth: 2 },
		        ConnectionOverlays: [
		            [ "Arrow", {
		                location: 1,
		                id: "arrow",
		                length: 14,
		                foldback: 0.8
		            } ],
		            [ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]
		        ],
			Container : "jspl-canvas",
		});

		instance.registerConnectionType("basic", {
			anchor : "Continuous",
			connector : "StateMachine"
		});

		window.jspl = instance;

		var canvas = document.getElementById("jspl-canvas");
		var windows = jsPlumb.getSelector("#jspl-canvas .draggable");

		// bind a click listener to each connection; the connection is deleted. you could of course
		// just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was
		// happening.
		//单击清除连接
		instance.bind("click", function(info) {
			instance.detach(info);
		});
		
		instance.bind("connectionDetached", function (info, originalEvent) {
            updateConnections(info.connection, true);
        });

		// bind a connection listener. note that the parameter passed to this function contains more than
		// just the new connection - see the documentation for a full list of what is included in 'info'.
		// this listener sets the connection's internal
		// id as the label overlay's text.
		instance.bind("connection", function(info) {
			updateConnections(info.connection);
			info.connection.getOverlay("label").setLabel("依赖");
		});

		//
		// initialise element as connection targets and source.
		//
		var initNode = function(el) {

			// initialise draggable elements.
			/* */ instance.draggable(el);
			
			/* */ $(el).draggable({
				//helper: "clone",
				//scope: "plant",
				opacity:0.6,
				containment: "#jspl-canvas",
				scroll: false,
				cursor : "move"
			});
			

			instance.makeSource(el, {
				filter : ".btn",
				anchor : "Continuous",
				connectorStyle : {
					stroke : "#5c96bc",
					strokeWidth : 2,
					outlineStroke : "transparent",
					outlineWidth : 4
				},
				connectionType : "basic",
				extract : {
					"action" : "the-action"
				},
				maxConnections : 4,
				onMaxConnections : function(info, e) {
					//alert("Maximum connections (" + info.maxConnections + ") reached");
					//layer.alert("Maximum connections (" + info.maxConnections + ") reached");
					Alert.error('每个组件最多支持（'+ info.maxConnections +'）个连接！','提示');
				}
			});

			instance.makeTarget(el, {
				dropOptions : {
					hoverClass : "dragHover"
				},
				anchor : "Continuous",
				allowLoopback : true
			});
			
			/* jsPlumb.addEndpoint(el.id, { anchors: "RightMiddle" }, exampleEndpoint3);
		    jsPlumb.addEndpoint(el.id, { anchors: "LeftMiddle" }, exampleEndpoint3);
		    jsPlumb.addEndpoint(el.id, { anchors: "TopCenter" }, exampleEndpoint3);
		    jsPlumb.addEndpoint(el.id, { anchors: "BottomCenter" }, exampleEndpoint3); */

			// this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped
			// version of this demo to find out about new nodes being added.
			//
			//instance.fire("jsPlumbDemoNodeAdded", el);
		};

		/* var newNode = function(x, y) {
			var d = document.createElement("div");
			var id = jsPlumbUtil.uuid();
			d.className = "w";
			d.id = id;
			d.innerHTML = id.substring(0, 7) + "<div class=\"ep\"></div>";
			d.style.left = x + "px";
			d.style.top = y + "px";
			instance.getContainer().appendChild(d);
			initNode(d);
			return d;
		}; */
		
		var createNode = function(ui){
			
			var d = $(ui.draggable[0].outerHTML)[0];
			var id = $(d).data('id');// jsPlumbUtil.uuid();
			d.id = id;//'jspl-'+d.id;
			
			//d.style.left = parseInt(ui.offset.left - $(canvas).offset().left);
			//d.style.top = parseInt(ui.offset.top - $(canvas).offset().top);
			
			var left = parseInt(ui.offset.left - $(canvas).offset().left);
			var top = parseInt(ui.offset.top - $(canvas).offset().top);
			//$("#" + id).css("left", left).css("top", top);
			
			$(d).css("left", left).css("top", top);
			
			instance.getContainer().appendChild(d);
			
			initNode(d);
			
			return id;
		}

		// suspend drawing and initialise.
		instance.batch(function() {
			/* for (var i = 0; i < windows.length; i++) {
			    initNode(windows[i], true);
			}
			// and finally, make a few connections
			instance.connect({ source: "opened", target: "phone1", type:"basic" });
			instance.connect({ source: "phone1", target: "phone1", type:"basic" });
			instance.connect({ source: "phone1", target: "inperson", type:"basic" });

			instance.connect({
			    source:"phone2",
			    target:"rejected",
			    type:"basic"
			}); */
		});

		jsPlumb.fire("jsPlumbDemoLoaded", instance);

		//左边区域的draggable事件
		$(".draggable").draggable({
			//helper: "clone",
			scope: "plant",
			opacity:0.6,
			revert:true,
			//containment: "#canvas",
			//scroll: false
			cursor : "move"
		});

		//中间拖拽区的drop事件
		$("#jspl-canvas").droppable({
			scope: "plant",
			tolerance : 'pointer', //鼠标进入区域视为有效
			//activeClass : '',
			drop : function(event, ui) {
				
				//去除重复
				var d = $(ui.draggable[0].outerHTML)[0];
				var id = $(d).data('id');
				
				if($(canvas).find('#'+id).length > 0){
					return false;
				}
				
				layer.open({
					type: 2,
					title: '组件信息',
					area: ['770px', '65%'],
					shade: 0.8,
					closeBtn: 1,
					maxmin:true,
					shadeClose: true,
					content: path+'/newpage/pop/serverAdd.jsp'
					,btn: ['确定', '取消']
					,yes: function(index){
					    layer.close(index);
					    
					 // 创建工厂模型到拖拽区
						//console.info(ui);
						createNode(ui);
						//instance.repaintEverything();
					    
					}
				});
			}
		});

	});
</script>
</body>
</html>